<template>
  <div class="container">
    <h2 class="title">购物车</h2>
    <div v-for="item of products" :key="item.id">
    <div class="item">
      <van-checkbox class="choose" v-model="item.isSelected"></van-checkbox>
      <van-card :price="item.productPrice" :desc="item.productInfo" :title="item.productName" :thumb="item.productCover">
       <div slot="bottom">
            <van-tag plain>小计:{{item.productPrice*item.productCount|money(2)}}</van-tag>
          </div>
        <div slot="footer">
          <van-stepper class="num" v-model="item.productCount" integer />
          <van-button size="mini" type="danger" class="delete" @click="handledelete(item)">删除</van-button>
        </div>
      </van-card>
    </div>
    </div>
    <van-submit-bar :price="sum*100" button-text="提交订单">
      <van-checkbox v-model="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  name: "Cart",
  data() {
      return {
          products:[]
      }
  },
   mounted() {
    var url = "http://yapi.demo.qunar.com/mock/35398/";
    this.axios.get(url).then(res => {
      this.products = res.data
     
    })
  },
   filters: {
    money(val, params) {
      return "$" + val.toFixed(params);
    }
  },
  computed:{
       checkAll: {
      get() {
        return this.products.every(item => item.isSelected);
      },
      set(val) {
        this.products.forEach(item => (item.isSelected = val));
      }
    },
     sum() {
     
      var total = 0;
      for (let i = 0; i < this.products.length; i++) {
        if (this.products[i].isSelected) {
          total = total + this.products[i].productCount * this.products[i].productPrice;
        } else {
          continue;
        }
      }
      return total;
    }
    
  },
  methods:{
     handledelete(item){
          var products = this.products.filter(value =>value !==item)
          this.products= products
      }
  }
  

}
</script>

<style lang="less" scoped>
.title {
  font-size: 30px;
}
.item{
    position: relative;
}
.choose{
    position: absolute;
    top:30px;
    z-index: 15;
}
.delete{
    position: absolute;
  right: 15px;
  bottom: 70px;
}
.num{
    position: absolute;
    right: 15px;
    bottom: 20px;
}


</style>